<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <title>我的信息</title>
    <link rel="stylesheet" type="text/css" href="../css/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" type="text/css" href="../css/userInfo.css">
</head>

<body>
    <div id="main">
        <section id="userInfo" data-role="page" data-title="我的信息">
            <div id="userInfos" class="ui-panel-wrapper content overFlow" data-role="content">
                <div id="userhead">
                    <img src="../image/java.png" alt="头像">
                    <span id="username">用户名</span>
                    <a href="#updatepage">
                        <div id="update"></div>
                    </a>
                </div>
                <div id="content" class="contentDiv" data-role="content">
                    <ul>
                        <a href="#taskForm">
                            <li>发布需求</li>
                        </a>
                        <a href="#waitpay">
                            <li>提供技能</li>
                        </a>
                    </ul>
                </div>

                <div class="floatTool">
                    <a href="#controlPanel" data-role="button" data-transition="slide" data-icon="grid" data-iconpos="notext" class="bigIcon">返回</a>
                </div>
            </div>

            <div data-role="panel" id="controlPanel">
                 <h2>导航</h2>
                 <div id="panelContent">
                       <a href="findSkill.html" data-ajax="false" data-role="button" data-icon="info" data-transition="pop">寻求技能</a>

                       <a href="help.html" data-ajax="false" data-role="button" data-icon="plus" data-transition="pop">提供帮助</a>

                       <a href="##" data-rel="close" data-role="button" data-icon="back">返回页面</a>
                 </div>
            </div>
        </section>

        <!--发布需求-->
        <section id="taskForm" data-role="page" data-title="发布的需求">
            <div id="allTasks" class="contenClass">
                <ul>
                    <a href="#myUser">
                        <li>全部任务</li>
                    </a>
                    <a href="#myUser">
                        <li>待确认</li>
                    </a>
                    <a href="#myUser">
                        <li>待完成</li>
                    </a>
                    <a href="#myUser">
                        <li>待付款</li>
                    </a>
                </ul>
                <div class="floatTool">
                    <a href="#userInfo" data-role="button" data-direction="reverse" data-icon="back" data-iconpos="notext" data-transition="pop"
                        class="bigIcon">返回</a>
                </div>
            </div>
        </section>

        <!--提供技能-->
        <section id="waitpay" data-role="page" data-title="提供的帮助">
            <div id="waitpayList" class="contenClass">
                <ul>
                    <a href="#myUser">
                        <li>全部任务</li>
                    </a>
                    <a href="#myUser">
                        <li>待确认</li>
                    </a>
                    <a href="#myUser">
                        <li>待完成</li>
                    </a>
                </ul>
                <div class="floatTool">
                    <a href="#userInfo" data-role="button" data-direction="reverse" data-icon="back" data-iconpos="notext" data-transition="pop"
                        class="bigIcon">返回</a>
                </div>
            </div>
        </section>

        <section id="myUser" data-role="page" data-title="详细信息">
            <div id="messageList">
                <ul>
                </ul>
            </div>

            <div class="floatTool" id="backtaskForm">
                <a href="#taskForm" data-role="button" data-direction="reverse" data-icon="back" data-iconpos="notext" data-transition="pop"
                    class="bigIcon">返回</a>
            </div>

            <div class="floatTool" id="backwaitpay">
                <a href="#waitpay" data-role="button" data-direction="reverse" data-icon="back" data-iconpos="notext" data-transition="pop"
                    class="bigIcon">返回</a>
            </div>
        </section>

        <section id="updatepage" data-role="page" data-title="修改信息">
            <form id="information">
                 <label for="nickname" id="namePrompt">您的用户名:</label>
                 <input type="text" id="nickname" placeholder="您的用户名:">

                 <label for="passwordA" id="passPrompt">设置密码:</label>
                 <input type="password" id="passwordA" placeholder="输入原密码">
                 <input type="password" id="passwordB" placeholder="输入新密码">

                 <div id="portraitDiv">
                     <input type="file" data-mini="true" id="portrait">
                 </div>
                 <button data-mini="true" id="choosePro" type="button">请选择头像</button>
                 <img src="" id="showPro">

                 <fieldset data-role="controlgroup" id="provide">
                     <legend>是否提供技能:</legend>
                     <label for="yes">是</label>
                     <input type="radio" id="yes" value="yes" name="nenufish" checked="true">
                     <label for="no">否</label>
                     <input type="radio" id="no" value="no" name="nenufish">
                 </fieldset>

                 <fieldset data-role="controlgroup" id="skillClass">
                     <legend>技能分类:</legend>
                     <label for="ps">P S</label>
                     <input type="checkbox" id="ps" value="PS" name="registe">
                     <label for="painting">绘  画</label>
                     <input type="checkbox" id="painting" value="绘画" name="registe">
                     <label for="photography">摄  影</label>
                     <input type="checkbox" id="photography" value="摄影" name="registe">
                     <label for="languages">外  语</label>
                     <input type="checkbox" id="languages" value="外语" name="registe">
                     <label for="computer">计算机</label>
                     <input type="checkbox" id="computer" value="计算机" name="registe">
                 </fieldset>

                 <label for="QQ" id="relationQQ">关联QQ号:</label>
                 <input type="text" id="QQ" placeholder="请输入QQ号">

                 <label for="phone" id="relationPhone">关联电话:</label>
                 <input type="number" id="phone" placeholder="请输入电话号码">

                 <div id="submitForm">
                     <button type="reset" data-inline="true">重置</button>
                     <button type="button" data-inline="true" id="registerGo">注册</button>
                 </div>
            </form>

            <div class="floatTool" id="backwaitpay">
                <a href="#userInfo" data-role="button" data-direction="reverse" data-icon="back" data-iconpos="notext" data-transition="pop"
                    class="bigIcon">返回</a>
            </div>
        </section>
    </div>

    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="../js/jquery.cookie.js"></script>
    <script type="text/javascript" src="../js/userInfo.js"></script>
</body>

</html>